import React, { PureComponent } from 'react';
import { Row, Popover } from 'antd';
import moment from 'moment';
import myStyle from './index.less';

export default class DateCardC extends PureComponent {
  state = {
    date: '',
  };

  componentDidMount() {}

  UNSAFE_componentWillReceiveProps(nextProps) {
    if (this.state.date != nextProps.date) {
      this.setState({
        date: nextProps.date,
      });
    }
  }
  render() {
    const { date } = this.state;
    const week_en = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
    const month_en = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
    const content = (
      <div className={'calendarEvents'}>
        <Row>
          <span>产品事件</span>
          <span>TA申购、TA赎回、TA红利再投、TA现金分红</span>
        </Row>
        <Row>
          <span>交易事件</span>
          <span>股票交易、债券交易、回购交易、存款交易、场外基金交易、非标（理财直融）交易、非标（非理财直融）交易、场内（ETF）交易</span>
        </Row>
        <Row>
          <span>行为事件</span>
          <span>债券行为（兑付、付息、提前还本、回售）、股票行为（派息分红）、基金行为（分红）、非标行为（到期、付息、提前还本）</span>
        </Row>
        <Row>
          <span>登记事件</span>
          <span>债回售登记、配售登记、转股登记</span>
        </Row>
      </div>
    );
    return (
      <div className={myStyle.card}>
        <div className='dateRow'>
          <span>{week_en[moment(date).format('d')]}</span>
          <span>
            {month_en[moment(date).format('M') - 1]} {moment(date).format('YYYY')}
          </span>
        </div>
        <div className='dateRow'>
          <span>{moment(date).format('dddd')}</span>
          <span>{moment(date).format('YYYY年MM月')}</span>
        </div>
        <div className='dayCenter'>
          <span>{moment(date).format('DD')}</span>
          <span>日</span>
        </div>
        <Popover placement='bottomRight' overlayStyle={{ width: '430px' }} content={content} trigger='click'>
          <div className='eventsInfo'>
            <span>事件说明</span>
          </div>
        </Popover>
      </div>
    );
  }
}
